<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="2000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="380"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide 
        v-for="(item,index) in imgArray" :key="index"
        :img-src="item"
      ></b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      slide: 0,
      sliding: null,
      imgArray: [
        require('@/assets/images/banner01.jpg'),
        require('@/assets/images/banner02.jpg'),
        require('@/assets/images/banner03.jpg'),
        require('@/assets/images/banner04.jpg')
      ]
    };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
     onSlideStart(slide) {
        this.sliding = true
      },
      onSlideEnd(slide) {
        this.sliding = false
      }
  }
};
</script>
<style scoped>
</style>